<template>
  <view>
    <view style="width: 100%; height: 148rpx"></view>
    <view class="footerNav">
      <view class="footerIcon">
        <view v-for="v in navList" :key="v.key" class="item" @click="goPage(v)">
          <image
            v-if="modelKey === v.key"
            :src="`/static/images/tabbar/${v.key}-2.png`"
            mode=""
            class="item-icon"
          ></image>
          <image
            v-else
            :src="`/static/images/tabbar/${v.key}-1.png`"
            mode=""
            class="item-icon"
          ></image>
          <view :class="modelKey === v.key ? 'atvtit' : 'tit'">
            {{ v.name }}
          </view>
        </view>
      </view>

      <u-safe-bottom></u-safe-bottom>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          key: 1,
          text: "Home",
          name: this.$t("home.tab0"),
          path: "/pages/home/index",
        },
        {
          key: 2,
          text: "Stake",
          name: this.$t("home.tab1"),
          path: "/pages/stake/index",
        },
        {
          key: 3,
          text: "HoldCoin",
          name: this.$t("home.h158"),
          path: "/pages/holdCoin/index",
        },
        {
          key: 4,
          text: "Team",
          name: this.$t("home.h149"),
          path: "/pages/team/index",
        },
        {
          key: 5,
          text: "Assets",
          name: this.$t("home.tab4"),
          path: "/pages/assets/index",
        },
      ],
    };
  },
  props: {
    modelKey: {
      type: Number,
      required: true,
    },
  },
  computed: {
    i18n() {
      return this.$t("home");
    },
  },
  methods: {
    goPage(v) {
      if (v.key === this.modelKey) return;
      uni.reLaunch({
        url: v.path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.footerNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 148rpx;
  background: #ffffff;
  padding: 30rpx 40rpx 40rpx;
  z-index: 9;
  margin: 0 auto;
  box-shadow: 0px -8px 8px 0px #f8fafc;
  .footerIcon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .item-icon {
        width: 48rpx;
        height: 48rpx;
      }
      .tit {
        margin-top: 14rpx;
        font-size: 16rpx;
        color: #000000;
      }
      .atvtit {
        margin-top: 14rpx;
        font-size: 16rpx;
        color: #835bf1;
      }
    }
  }
}
</style>
